{include file="header" title="$title" /}
    <div class="i-card-main">
        <div class="search">
          <input type="text" placeholder="搜索题目">
          <i class="iconfont icon-search"></i>
        </div>
    </div>
    <div class="row" id="category">
        <div class="col">
            <div class="i-card-main">
                <div class="nav-list">
                    <ul class="sort">
                        <span class="title">Sort</span>
                        <li class="active">
                            <span id="all">ALL</span>
                        </li>
                    </ul>
                    <ul class="state">
                        <span class="title">State</span>
                        <li class="active"><span id="all">ALL</span></li>
                        <li><span id="unsolved">Unsolved</span></li>
                        <li><span id="resolved">Resolved</span></li> 
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="challenges"></div>
    <nav id="page" style="display: none;">
        <ul class="pagination justify-content-center"></ul>
    </nav>
    <div class="modal fade" id="challengeModal" data-backdrop="static" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content challenge-info">
                <div class="modal-header">
                    <h6 class="modal-title active" id="challenge"><span>Challenge</span> </h6>
                    <h6 class="modal-title" id="ranking"> <span>Resolved</span></h6> 
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="ranking" style="display: none;">
                    <table class="table" style="margin-top: 0">
                        <tbody></tbody>
                    </table>
                </div>
                <div class="form">
                    <div class="id" style="display: none"></div>
                    <div class="title"></div><hr>
                    <div class="content"></div>
                    <span class="but">
                        <div class="download" style="display: none;"><a class="btn btn-secondary" href="" target="_blank">下载附件</a></div>
                        <div class="hint" style="display: none;"><span class="btn btn-info" data-toggle="modal" data-target="#hintModal">查看提示</span></div>
                    </span>
                    <hr>
                    <div class="form-input">
                        <div class="form-group">
                            <input name="flag" type="text" placeholder="flag{}">
                            <i class="iconfont icon-post"></i>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn bot-close btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" id="postFlag" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="hintModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Hint</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" id="hintData"></div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
</div>

<div class="modal fade" id="buyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Buy</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" id="buyData"></div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">确认</button>
        </div>
        </div>
    </div>
</div>
{include file="footer" /}
<script>
$(".loading").show();
$("#category").hide();
$(".close, .bot-close").click(function () {
  $("input[name='flag']").val("");
});

$(document).ready(function () {
  // 获取分类
  $.get("/api/v1/getCategory", function (res) {
    if (res.code == 200) {
      let sort = res.data;
      let html = "";
      for (let i = 0; i < sort.length; i++) {
        html += '<li><span id="' + sort[i].name + '">' + sort[i].name + "</span></li>";
      }
      $(".sort").append(html);
    } else {
      layer.msg(res.msg);
    }
  });

  // 获取题目
  getSearchSort();

  // 判断 URL 是否有锚点
  var hash = window.location.hash;
  if (hash) {
    const hashArr = hash.split("-");
    $.get("/api/v1/getChallengeInfo/" + hashArr[1]).then((res) => {
      if (res.code == 200) {
        setTimeout(function () {
          getChallengeInfo(res);
        }, 500);
      } else {
        layer.msg(res.msg, { icon: 2 });
        history.pushState("", "", window.location.pathname);
      }
      setTimeout(function () {
        $(".loading").hide();
      }, 500);
    });
  }
});

$("#challenges").on("click", ".solve-list", function () {
  const id = $(this).children().first().text();
  const title = $(this).children().first().next().text();
  $.get("/api/v1/getChallengeInfo/" + id).then((res) => {
    if (res.code == 200) {
        getChallengeInfo(res)
        history.pushState("", "", window.location.pathname + '#'+title+'-'+id);
      } else {
        layer.msg(res.msg, {icon: 2});
      }
      setTimeout(function () {
        $(".loading").hide();
      }, 500);
    });
});

$("#postFlag").click(function () {
  const flag = $("input[name='flag']").val();
  const title = $(".challenge-info .title").text();
  const id = $(".challenge-info .id").text();
  $.post("/api/v1/postFlag", {
    id: id,
    title: title,
    flag: flag
  }).then((res) => {
    if (res.code == 200) {
      layer.msg(res.msg, { icon: 1 });
      $(".challenge-info .form-input").hide();
    } else {
      layer.msg(res.msg, { icon: 2 });
    }
  });
});

$(".challenge-info .modal-header .modal-title").on("click", function () {
  var $this = $(this);
  if (!$this.hasClass("active")) {
    $(".challenge-info .modal-header .modal-title").removeClass("active");
    $this.addClass("active");
  }
  const $form = $(".challenge-info .form");
  if ($this.attr("id") == "ranking") {
    $(".ranking").show();
    $(".loading").show();
    $form.hide();
    const id = $form.find(".id").text();
    $.post("api/v1/getSolveRank", { id: id }).then(function (res) {
      let html = "";
      if (res.code == 200) {
        $.each(res.data, function (i, item) {
          html += "<tr><td>" + item.username + "</td><td>" + timestampToTime(item.time) + "</td></tr>";
        });
      } else {
        html += "<tr><td>No Data</td></tr>";
      }
      $(".ranking tbody").html(html);
      setTimeout(function () {
        $(".loading").hide();
      }, 500);
    });
    $(".close").on("click", function () {
      setTimeout(function () {
        $(".challenge-info #ranking").removeClass("active");
        $(".challenge-info #challenge").addClass("active");
        $(".ranking").hide();
        $form.show();
        $(".ranking tbody").html("");
      }, 500);
    });
  } else {
    $(".ranking").hide();
    $form.show();
  }
  $(".loading").hide();
});

$(".search").on("click", ".icon-search", function () {
  const search = $(".search input").val();
  if (search == "") {
    layer.msg("Please enter the search content", {icon: 2});
    return;
  }
  $(".loading").show();
  $("#challenges").hide();
  $("#page").hide();
  $.get("api/v1/getSearchInfo?keyword=" + search, function (res) {
    if (res.code == 200) {
      let html = getChallenges(res)
      setTimeout(function () {
        $("#challenges").html(html);
        $("#challenges").show();
        if (res.data.total > 11) {
          getPage(res);
        }else{
          $("#page").hide();
        }
        $(".loading").hide();
      }, 500);
    } else {
      setTimeout(function () {
        $("#page").hide();
        $("#challenges").show();
        layer.msg(res.msg, {icon: 2});
        $(".loading").hide();
      }, 500);
    }
  });
});

$(".search input").keydown(function (e) {
  if (e.keyCode == 13) {
    $(".search .icon-search").click();
  }
});

$(".nav-list").on("click", ".sort li, .state li", function () {
  history.pushState("", "", window.location.pathname);
  $(".loading").show();
  $("#challenges").hide();
  $("#page").hide();
  if (!$(this).hasClass("active")) {
    $(this).parent().children().removeClass("active");
    $(this).addClass("active");
  }
  const sort = $(".sort .active span").attr("id");
  const state = $(".state .active span").attr("id");
  getSearchSort(sort, state, page);
});

function getSearchSort(sort='all', state='all', page=1){
  $(".loading").show();
  $("#challenges").hide();
  $("#page").hide();
  $.post("api/v1/getChallenges", {
    page: page,
    sort: sort,
    state: state
  }).then((res) => {
    if (res.code == 200) {
      $("#challenges").removeClass("justify-content-center")
      let html = getChallenges(res)
      setTimeout(function () {
        $(".loading").hide();
        $("#category").show();
        $("#challenges").html(html);
        $("#challenges").show();
        if (res.data.total > 11) {
          getPage(res);
        }else{
          $("#page").hide();
        }
        $(".loading").hide();
      }, 500);
    } else {
      let html = '<span class="no-data">No Data...</span>'
      $("#challenges").addClass("justify-content-center")
      setTimeout(function () {
        $("#page").hide();
        $("#challenges").html(html);
        $("#challenges").show();
        $(".loading").hide();
      }, 500);
    }
  });
}

$("#buyModal .btn-primary").click(function () {
  const title = $(".challenge-info .title").text();
  const id = $(".challenge-info .id").text();
  $.post("/api/v1/buyChallenge", {
    id: id,
    title: title
  }).then((res) => {
    if (res.code == 200) {
      layer.msg(res.msg, { icon: 1 });
      window.location.reload();
    } else {
      layer.msg(res.msg, { icon: 2 });
    }
  });
});

ws = new WebSocket("ws://127.0.0.1:2348");
ws.onmessage = function (e) {
  const data = eval("(" + e.data + ")");
  const type = data.type || "";
  switch (type) {
    case "init":
      $.post(
        "/api/v1/notify",
        { client_id: data.client_id },
        function (data) {},
        "json"
      );
      break;
    case "notify":
      $("#notifyModal .modal-body p").html(data.msg);
      $("#notifyModal").modal("show");
      break;
    default:
  }
};
</script>
</body>
</html>